
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Link } from "react-router-dom";
import { 
  GraduationCap, 
  ArrowRight,
  Play
} from "lucide-react";

export const TeacherHome = () => {
  return (
    <>
      {/* Hero Section for Teachers */}
      <section className="py-20 md:py-32 bg-white">
        <div className="container mx-auto px-4">
          <div className="max-w-5xl mx-auto text-center">
            <Badge className="mb-8 bg-gradient-to-r from-blue-100 to-purple-100 text-blue-700 border-blue-200 px-4 py-2 text-sm">
              <GraduationCap className="w-4 h-4 mr-2" />
              Teacher Dashboard
            </Badge>
            
            <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold mb-8 text-gray-900 leading-tight">
              Empower Your Teaching with{" "}
              <span className="bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">
                Mevolution
              </span>
            </h1>
            
            <p className="text-xl md:text-2xl text-gray-600 mb-12 max-w-4xl mx-auto leading-relaxed">
              Create engaging courses, track student progress, and enhance your teaching effectiveness with our comprehensive AI-powered platform.
            </p>
            
            <div className="flex flex-col sm:flex-row gap-6 justify-center mb-16">
              <Button asChild size="lg" className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-8 py-4 text-lg h-14 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300">
                <Link to="/smart-builder">
                  Create Course
                  <ArrowRight className="w-5 h-5 ml-2" />
                </Link>
              </Button>
              <Button variant="outline" size="lg" className="border-2 border-blue-300 hover:bg-gradient-to-r hover:from-blue-500 hover:to-purple-600 hover:text-white hover:border-transparent px-8 py-4 text-lg h-14 rounded-lg transition-all duration-300">
                <Play className="w-5 h-5 mr-2" />
                View Tutorial
              </Button>
            </div>

            {/* Teacher Stats */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-3xl mx-auto">
              <div className="text-center">
                <div className="text-3xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent mb-2">1000+</div>
                <div className="text-gray-600">Teaching Resources</div>
              </div>
              <div className="text-center">
                <div className="text-3xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent mb-2">50k+</div>
                <div className="text-gray-600">Students Reached</div>
              </div>
              <div className="text-center">
                <div className="text-3xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent mb-2">4.8★</div>
                <div className="text-gray-600">Teacher Rating</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};
